<!-- 企业VIP页面 -->
<template>
  <div class="vip-combo">
    <div class="personage-vip">
      <h1>个人vip套餐</h1>
      <n-table :single-line="false">
        <thead>
          <tr>
            <th v-for="item in thOne">{{ item }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td v-for="item in tdOne">{{ item }}</td>
            <td><n-button type="info"> 购买体验 </n-button></td>
          </tr>
          <tr>
            <td v-for="item in tdTwo">{{ item }}</td>
            <td><n-button type="info"> 购买体验 </n-button></td>
          </tr>
          <tr>
            <td v-for="item in tdThree">{{ item }}</td>
            <td>
              <n-button type="info"> 购买体验 </n-button>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>

    <div class="enterprise-vip">
      <h1>企业vip套餐</h1>
      <n-table :single-line="false">
        <thead>
          <tr>
            <th v-for="item in entThOne">{{ item }}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td v-for="item in entTdOne">{{ item }}</td>
            <td><n-button type="info"> 购买体验 </n-button></td>
          </tr>
          <tr>
            <td v-for="item in entTdTwo">{{ item }}</td>
            <td><n-button type="info"> 购买体验 </n-button></td>
          </tr>
          <tr>
            <td v-for="item in entTdThree">{{ item }}</td>
            <td>
              <n-button type="info"> 购买体验 </n-button>
            </td>
          </tr>
        </tbody>
      </n-table>
    </div>
  </div>
</template>

<script setup>
import { NTable, NButton } from "naive-ui";
import { reactive } from "vue";

// 个人vip套餐数据
const thOne = reactive(["", "权益一", "权益二", "价格", ""]);
const tdOne = reactive(["套餐一", "", "", ""]);
const tdTwo = reactive(["套餐二", "", "", ""]);
const tdThree = reactive(["套餐三", "", "", ""]);

// 企业vip套餐数据
const entThOne = reactive(["", "子账号数", "下载数量", "价格", ""]);
const entTdOne = reactive(["套餐一", "", "", ""]);
const entTdTwo = reactive(["套餐二", "", "", ""]);
const entTdThree = reactive(["套餐三", "", "", ""]);
</script>
<style lang="scss" scoped>
.vip-combo {
  margin-bottom: 20px;
  .personage-vip {
    margin-bottom: 20px;
    background: #fff;
    h1 {
      font-size: 20px;
      margin-bottom: 20px;
    }
    border: 1px solid #ccc;
    padding: 20px;
    thead tr th {
      text-align: center;
    }

    tbody tr td {
      text-align: center;
    }
  }
  .enterprise-vip {
    margin-bottom: 20px;
    background: #fff;
    h1 {
      font-size: 20px;
      margin-bottom: 20px;
    }
    border: 1px solid #ccc;
    padding: 20px;
    thead tr th {
      text-align: center;
    }

    tbody tr td {
      text-align: center;
    }
  }
}
</style>
